<template>
  <el-form
    ref="queryForm"
    class="query-form"
    :model="queryForm"
    label-suffix="："
    inline
    size="small"
    status-icon
    label-position="right"
  >
    <el-form-item :prop="PROPS.dictionaryType">
      <el-input
        v-model.trim="queryForm[PROPS.dictionaryType]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.dictionaryType}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.status">
      <el-select
        v-model="queryForm[PROPS.status]"
        class="common-query-form-item-width-sm"
        :placeholder="LABELS.status"
        clearable
        @change="getDataList"
      >
        <el-option
          v-for="item in $store.state.data.OPTION_MAP[OPTION_KEYS.status]"
          :key="item.status"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <t-button class="common-search-btn" type="primary" @click="getDataList">查 询</t-button>
      <t-button type="primary" class="common-search-btn" @click="refresh">刷 新</t-button>
      <t-button
        type="default"
        class="common-search-btn"
        plain
        @click="
          $refs.queryForm.resetFields();
          getDataList(true);
        "
        >重 置
      </t-button>
    </el-form-item>
    <div class="relative -left-[16px] -top-[1px] mb-[16px] h-[1px] w-[calc(100%+32px)] bg-[#00000014]"></div>
  </el-form>
</template>

<script>
import config from "../config";

export default {
  name: "QueryForm",
  components: {},
  inject: ["reload"],
  props: {
    getDataList: {
      type: Function,
      required: true,
    },
  },
  emits: ["create-item", "batch-delete"],
  data() {
    return {
      ...config,
      queryForm: {
        [config.PROPS.dictionaryType]: "",
        [config.PROPS.status]: "",
      },
    };
  },
  computed: {},
  methods: {
    refresh() {
      this.$store.dispatch("data/getDictAll");
      this.reload(1);
    },
  },
};
</script>

<style lang="scss" scoped></style>
